<template>
  <div class="lys_layout">
    <div class="lys_aside">
      <el-menu
        :collapse="collapse"
        router
        :default-active="$route.meta.index"
        class="el-menu-vertical-demo"
        background-color="#001529"
        text-color="#a6adb4"
        active-text-color="#fff"
      >
        <h1 class="logo_title">
          <img src="@/assets/logo-white.png" alt="" />
        </h1>
        <template v-for="(item, idx) in routes">
          <el-menu-single-item
            :key="idx"
            :item="item"
            v-if="
              (!item.children || item.children.length === 0) &&
              !item.redirect &&
              item.meta.isShow
            "
          ></el-menu-single-item>

          <el-submenu
            :key="idx"
            :index="item.meta.index"
            :route="{ path: item.path }"
            v-if="
              item.children &&
              item.children.length !== 0 &&
              !item.redirect &&
              item.meta.isShow
            "
          >
            <template slot="title">
              <i :class="item.meta.icon"></i>
              <span>{{ $t(item.meta.title) }}</span>
            </template>
            <el-submenu-item
              :list="item.children"
              :parentPath="item.path"
            ></el-submenu-item>
          </el-submenu>
        </template>
      </el-menu>
    </div>
    <div class="lys_main">
      <div class="lys_main_header">
        <div class="lys_main_header_left">
          <i
            class="lys_main_header_collapse_btn"
            :class="!collapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
            @click="collapse = !collapse"
          ></i>
          <span>{{ $t("systemTitle") }}</span>
        </div>
        <div class="lys_main_header_right">
          <el-dropdown @command="setting">
            <span class="el-dropdown-link">
              <i class="el-icon-setting"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="{ functionName: 'setLocale', args: ['zh'] }"
                >中文</el-dropdown-item
              >
              <el-dropdown-item
                :command="{ functionName: 'setLocale', args: ['en'] }"
                >English</el-dropdown-item
              >
              <el-dropdown-item
                :command="{ functionName: 'routerCardFullScreen', args: [] }"
                >{{ $t("setting.routerCardFullScreen") }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="lys_main_body">
        <el-card class="lys_main_body_card" ref="lys_main_body_card">
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive"> </router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive"></router-view>
        </el-card>
      </div>
      <div class="lys_main_footer">
        Copyright 2020 广州南方卫星导航仪器有限公司 出品
      </div>
    </div>
  </div>
</template>
<script>
import routes from "@/router/routes";
import ElSubmenuItem from "@/components/menu/ElSubmenuItem.vue";
import ElMenuSingleItem from "@/components/menu/ElMenuSingleItem.vue";
export default {
  components: { ElSubmenuItem, ElMenuSingleItem },
  data() {
    return {
      routes,
      collapse: false,
    };
  },
  methods: {
    routerCardFullScreen(e) {
      this.$refs["lys_main_body_card"].$el.requestFullscreen();
    },
    setting({ functionName, args }) {
      this[functionName](...args);
    },
    setLocale(locale) {
      this.$i18n.locale = locale;
    },
  },
};
</script>
<style lang="scss">
@import url("@/style.css");

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

$headerHeight: 59px;
.lys_layout {
  display: flex;
  width: 100vw;
  height: 100vh;
  .lys_aside {
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    .el-menu {
      flex: 1;
      overflow-y: auto;
      .logo_title {
        width: 100%;
        height: $headerHeight;
        background-color: #002140;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .lys_main {
    flex: 1;
    height: 100%;
    background-color: #f0f2f5;
    overflow: hidden;
    position: relative;
    .lys_main_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: $headerHeight;
      background-color: #fff;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
      .lys_main_header_left {
        display: flex;
        align-items: center;
        .lys_main_header_collapse_btn {
          font-size: 25px;
          padding: 0 18px;
          cursor: pointer;
        }
      }
      .lys_main_header_right {
        padding: 0 20px;
        .el-dropdown {
          font-size: 20px;
        }
      }
    }
    .lys_main_body {
      position: absolute;
      top: $headerHeight;
      bottom: 35px;
      left: 0;
      right: 0;
      height: auto;
      box-sizing: border-box;
      padding: 12px 12px 0;
      .lys_main_body_card {
        width: 100%;
        height: 100%;
        & > .el-card__body {
          width: 100%;
          height: 100%;
          padding: 0;
          box-sizing: border-box;
          & > div {
            &[desen] {
              padding: 20px;
              box-sizing: border-box;
            }
            & > div[desen] {
              padding: 20px;
              box-sizing: border-box;
            }
          }
        }
      }
    }
    .lys_main_footer {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
    }
  }
}
</style>